<template>
  <li class="cus-indexsection">
    <p class="cus-indexsection-index">{{ index }}</p>
    <ul class="indexsection-list">
      <slot></slot>
    </ul>
  </li>
</template>

<script>
export default {
  name: 'index-section',
  props: {
    index: {
      type: String,
      required: true
    }
  },
  mounted () {
    this.$parent.sections.push(this)
  },
  beforeDestroy () {
    let index = this.$parent.sections.indexOf(this)
    if (index > -1) {
      this.$parent.sections.splice(index, 1)
    }
  }
}
</script>

<style lang="scss" scoped>
.cus-indexsection {
  padding: 0;
  margin: 0;
  .cus-indexsection-index {
    margin: 0;
    padding: 0 .426667rem;
    color: #ffffff;
    line-height: .933333rem;
    background-color: #61a843;
    font-size: .32rem;
    & + ul {
      padding: 0;
    }
  }
}
</style>
